<template>
  <view class="custom-tabbar">
    <view class="tabbar-item" 
      v-for="(item, index) in tabList" 
      :key="index" 
      @click="switchTab(item.pagePath)">
      <image :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" mode="aspectFit" class="tabbar-icon"></image>
      <view class="tabbar-text" :class="{'active': currentPath === item.pagePath}">{{item.text}}</view>
    </view>
  </view>
</template>

<script>
  import { getCurrentPagePath, getTabbarConfig } from '../app.js'
  
  export default {
    name: 'custom-tabbar',
    data() {
      return {
        currentPath: '/pages/index/index',
        tabList: []
      }
    },
    created() {
      // 使用app.js中的函数获取tabbar配置
      this.tabList = getTabbarConfig()
      
      // 获取当前页面路径
      this.updateCurrentPath()
    },
    mounted() {
      // 页面挂载后再次更新路径，确保准确性
      this.updateCurrentPath()
    },
    methods: {
      updateCurrentPath() {
        // 首先尝试从全局获取保存的tabPath
        try {
          if (typeof getApp !== 'undefined') {
            const app = getApp()
            if (app && app.globalData && app.globalData.currentTabPath) {
              this.currentPath = app.globalData.currentTabPath
              console.log('从全局获取导航路径:', this.currentPath)
              return
            }
          }
        } catch (e) {
          console.error('获取全局导航路径失败:', e)
        }
        
        // 回退到通过路径匹配的方式
        const path = getCurrentPagePath()
        console.log('当前页面路径:', path)
        
        // 如果当前在饮食相关页面，应该高亮饮食选项卡
        if (path.includes('/pages/diet/')) {
          this.currentPath = '/pages/diet/index'
        } 
        // 如果在血糖相关页面，高亮血糖选项卡
        else if (path.includes('/pages/record/')) {
          this.currentPath = '/pages/record/list'
        }
        // 如果在社区相关页面，高亮社区选项卡
        else if (path.includes('/pages/community/')) {
          this.currentPath = '/pages/community/index'
        }
        // 如果在个人中心相关页面，高亮个人中心选项卡
        else if (path.includes('/pages/profile/')) {
          this.currentPath = '/pages/profile/index'
        }
        // 如果在首页相关页面，高亮首页选项卡
        else if (path.includes('/pages/index/')) {
          this.currentPath = '/pages/index/index'
        }
        // 如果都不匹配，使用原路径
        else {
          this.currentPath = path
        }
      },
      switchTab(path) {
        if (this.currentPath === path) return
        uni.switchTab({
          url: path
        })
      }
    }
  }
</script>

<style lang="scss">
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
  z-index: 9999;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
  
      .tabbar-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      position: relative;
      transition: all 0.2s ease;
      
      &:active {
        opacity: 0.7;
      }
      
      .tabbar-icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 5rpx;
      }
      
      &.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 40rpx;
        height: 4rpx;
        background-color: #8cc9a1;
        border-radius: 2rpx;
      }
    
    .tabbar-text {
      font-size: 22rpx;
      color: #999999;
      margin-top: 6rpx;
      
      &.active {
        color: #8cc9a1;
        font-weight: 500;
      }
    }
  }
}
</style> 